myems /
myems-web
| Conditions | 11 |
| Total Lines | 102 |
| Code Lines | 81 |
| Lines | 0 |
| Ratio | 0 % |
| Changes | 0 | ||
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
Complex classes like RealtimeChart.componentDidMount often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes.
Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.
| 1 | import React, { Component } from 'react'; |
||
| 63 | |||
| 64 | componentDidMount() { |
||
| 65 | this._isMounted = true; |
||
| 66 | // fetch meter realtime data at the first time |
||
| 67 | let isResponseOK = false; |
||
| 68 | fetch(APIBaseURL + '/reports/meterrealtime?meterid=' + this.props.meterId, { |
||
| 69 | method: 'GET', |
||
| 70 | headers: { |
||
| 71 | "Content-type": "application/json", |
||
| 72 | "User-UUID": getCookieValue('user_uuid'), |
||
| 73 | "Token": getCookieValue('token') |
||
| 74 | }, |
||
| 75 | body: null, |
||
| 76 | |||
| 77 | }).then(response => { |
||
| 78 | if (response.ok) { |
||
| 79 | isResponseOK = true; |
||
| 80 | } |
||
| 81 | return response.json(); |
||
| 82 | }).then(json => { |
||
| 83 | if (isResponseOK) { |
||
| 84 | console.log(json); |
||
| 85 | let trendLog = json['energy_value']['values']; |
||
| 86 | let currentEnergyValue = undefined; |
||
| 87 | let pointList = []; |
||
| 88 | if (trendLog.length > 0) { |
||
| 89 | currentEnergyValue = trendLog[trendLog.length - 1]; |
||
| 90 | } |
||
| 91 | json['parameters']['names'].forEach((currentName, index) => { |
||
| 92 | let pointItem = {} |
||
| 93 | pointItem['name'] = currentName; |
||
| 94 | pointItem['value'] = undefined; |
||
| 95 | let currentValues = json['parameters']['values'][index]; |
||
| 96 | if (currentValues.length > 0) { |
||
| 97 | pointItem['value'] = currentValues[currentValues.length - 1]; |
||
| 98 | } |
||
| 99 | pointList.push(pointItem); |
||
| 100 | }); |
||
| 101 | if (this._isMounted) { |
||
| 102 | this.setState({ |
||
| 103 | trendLog: trendLog, |
||
| 104 | currentEnergyValue: currentEnergyValue, |
||
| 105 | pointList: pointList, |
||
| 106 | }); |
||
| 107 | } |
||
| 108 | } else { |
||
| 109 | toast.error(json.description) |
||
| 110 | } |
||
| 111 | }).catch(err => { |
||
| 112 | console.log(err); |
||
| 113 | }); |
||
| 114 | |||
| 115 | //fetch meter realtime data at regular intervals |
||
| 116 | this.refreshInterval = setInterval(() => { |
||
| 117 | let isResponseOK = false; |
||
| 118 | fetch(APIBaseURL + '/reports/meterrealtime?meterid=' + this.props.meterId, { |
||
| 119 | method: 'GET', |
||
| 120 | headers: { |
||
| 121 | "Content-type": "application/json", |
||
| 122 | "User-UUID": getCookieValue('user_uuid'), |
||
| 123 | "Token": getCookieValue('token') |
||
| 124 | }, |
||
| 125 | body: null, |
||
| 126 | |||
| 127 | }).then(response => { |
||
| 128 | if (response.ok) { |
||
| 129 | isResponseOK = true; |
||
| 130 | } |
||
| 131 | return response.json(); |
||
| 132 | }).then(json => { |
||
| 133 | if (isResponseOK) { |
||
| 134 | console.log(json); |
||
| 135 | let trendLog = json['energy_value']['values']; |
||
| 136 | let currentEnergyValue = undefined; |
||
| 137 | let pointList = []; |
||
| 138 | if (trendLog.length > 0) { |
||
| 139 | currentEnergyValue = trendLog[trendLog.length - 1]; |
||
| 140 | } |
||
| 141 | json['parameters']['names'].forEach((currentName, index) => { |
||
| 142 | let pointItem = {} |
||
| 143 | pointItem['name'] = currentName; |
||
| 144 | pointItem['value'] = undefined; |
||
| 145 | let currentValues = json['parameters']['values'][index]; |
||
| 146 | if (currentValues.length > 0) { |
||
| 147 | pointItem['value'] = currentValues[currentValues.length - 1]; |
||
| 148 | } |
||
| 149 | pointList.push(pointItem); |
||
| 150 | }); |
||
| 151 | if (this._isMounted) { |
||
| 152 | this.setState({ |
||
| 153 | trendLog: trendLog, |
||
| 154 | currentEnergyValue: currentEnergyValue, |
||
| 155 | pointList: pointList, |
||
| 156 | }); |
||
| 157 | } |
||
| 158 | } else { |
||
| 159 | toast.error(json.description) |
||
| 160 | } |
||
| 161 | }).catch(err => { |
||
| 162 | console.log(err); |
||
| 163 | }); |
||
| 164 | }, (60 + Math.floor(Math.random() * Math.floor(10))) * 1000); // use random interval to avoid paralels requests |
||
| 165 | } |
||
| 216 |
